iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
自我挑戰組

ASP.NET Core & Blazor系列 第 15

Day 15 CSS isolation

  • 分享至 

  • xImage
  •  

CSS isolation 介紹

有時候會想對不同 Component 做個別樣式設定,但如果把 class 都寫在 wwwroot/css/site.css,或是針對某個元素改動樣式,可能導致改一個就影響全部 Component,這種全域衝突是必須避免的,但應該怎麼做?

.NET 5 推出了 CSS isolation(CSS 隔離),建立 Component 個別 css 檔案,命名規範為 {Component name}.razor.css,檔案會自動跟 {Component name}.razor 收納在一起,且名稱不分大小寫。下圖可以看到不論是 Blog.razor.css 還是 blog.razor.css 都會跟 Blog.razor 被視為同一組。
https://ithelp.ithome.com.tw/upload/images/20211011/20140893qYjy2kRJLP.png
https://ithelp.ithome.com.tw/upload/images/20211011/20140893cNYZS5VPL5.png

CSS isolation 會在建置時被處理,Blazor 會改寫 CSS 選擇器並產生一個 {Project name}.style.css 檔案,可以在 wwwroot/index.html (Blazor WebAssembly) 或是 Pages/_Host.cshtml (Blazor Server)<head> 標籤內找到引用路徑,由於這是建置時才會產生,所以在專案內是看不到的,我們打開瀏覽器的 Dev tool 並切換到 Sources 頁籤,就能看到這檔案。
https://ithelp.ithome.com.tw/upload/images/20211011/20140893e5glmz5lVd.png
https://ithelp.ithome.com.tw/upload/images/20211011/20140893mFomAgH7oo.png

有人可能會發現為何 class 後面接著沒看過的內容,例如 .page[b-mxoy4q7bj7] 或是 .main[b-mxoy4q7bj7],這是 Blazor 用來辨識 CSS 選擇器作用在哪個 Component 的區域識別碼,格式為 b-10 位元數字及英文字串,每個 Component 的區域識別碼都是獨一無二的,可知這裡的 .main.page class 只作用於 [b-mxoy4q7bj7] 對應的 Component,註解寫著 /* _content/BlazorServer/Shared/MainLayout.razor.rz.scp.css */,打開 Shared/MainLayout.razor.css,的確看到了 .main.page class,rz.scp.css 附檔名是用來辨識 CSS 選擇器屬於哪個 Component。
https://ithelp.ithome.com.tw/upload/images/20211011/20140893PAU8Kt8zbK.png

我們在 Blog.razor.css 加上一段針對 label 的樣式修改,按下 ctrl + shift + B 建置專案,再看網頁就能看到文字顏色改變了,BlazorServer.style.css 也能看到 Blog.razor.rz.scp.css 的樣式區塊多了一段 label[b-0ae5hiw99t]

label {
    color: darkcyan
}

https://ithelp.ithome.com.tw/upload/images/20211011/20140893vFvmxCJ4Dx.png

套用樣式到 Child Component

如果想對 Post Component 的 label 元素套用相同樣式,又不想分別建立 razor.css 檔案呢?Blazor 提供了方便的做法,只要在 CSS 選擇器前面加上 ::deep 即可,我們在 Blog.razor.css 的 label 前面加上 ::deep,就能看到 Post 的 label 元素顏色都改變了,BlazorServer.style.css 的 class 也從 label[b-0ae5hiw99t] 變成了 [b-0ae5hiw99t] label
https://ithelp.ithome.com.tw/upload/images/20211011/20140893kMqMqNUziy.png
https://ithelp.ithome.com.tw/upload/images/20211011/20140893dCxMIcPiJ6.png
https://ithelp.ithome.com.tw/upload/images/20211011/20140893ohNyPZDHlN.png

不過要注意的是,必須有父子關係 ::deep 才能生效,Parent Compoent 的區域識別碼僅作用於 <div> 標籤,如果 Child Component 沒有被 <div> 標籤包住就不會生效。我們把 Blog.razor 中包住 Post Component 的 <div> 標籤都註解,儲存後再去網頁看,發現 <label> 文字顏色都變回黑色了,但 BlazorServer.style.css 的 class 仍舊是 [b-0ae5hiw99t] label
https://ithelp.ithome.com.tw/upload/images/20211011/20140893cayelJHQSS.png
https://ithelp.ithome.com.tw/upload/images/20211011/20140893ixdklek7Gf.png

Ref: ASP.NET Core Blazor CSS isolation


上一篇
Day 14 JavaScript interop
下一篇
Day 16 建立資料庫
系列文
ASP.NET Core & Blazor30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言